<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品预览</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/selectY/selectY.css" />
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">
		.selectY-box .show{
			width: 762px;	
		}
		.zdy-i-w{
			width:800px;
		}
		
	</style>
</head>
<body class="body-container">
	<div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>商品预览</legend>
		</fieldset>		
	</div>	
	
	<form class="layui-form" action="">
	  <div class="layui-form-item">
	  	<label class="layui-form-label">商品类别</label>
	  	<div class="layui-input-block">
			<div class="layui-col-xs8">			
				<input type="hidden" id="categorySelectY" value=""/>
			</div>	
		</div>
	  </div>
	
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="productName" lay-verify="required" autocomplete="off" placeholder="请输入商品名称" class="layui-input zdy-i-w" maxlength="30" value="噢噢噢噢测试商品名称">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品标题</label>
	    <div class="layui-input-block">	
	      <input type="text" name="productTitle" lay-verify="required" placeholder="请输入商品标题" autocomplete="off" class="layui-input zdy-i-w" maxlength="30" value="啦啦啦测试商品标题">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">原价</label>
	      <div class="layui-input-inline">
	        <input type="tel" name="originalPrice" onkeyup="moneyFilter(this)" lay-verify="required" autocomplete="off" class="layui-input" maxlength="10" value="200">
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label">售价</label>
	      <div class="layui-input-inline">
	        <input type="text" name="sellingPrice" onkeyup="moneyFilter(this)" lay-verify="required" autocomplete="off" class="layui-input" maxlength="10" value="100">
	      </div>
	    </div>	
	    <div class="layui-inline">
	      <label class="layui-form-label">销售量</label>
	      <div class="layui-input-inline">
	        <input type="text" name="quantitySold" onkeyup="numberFilter(this)" lay-verify="required" autocomplete="off" class="layui-input" maxlength="10" value="100">
	      </div>
	    </div>
	  </div>
	  	
	  <div class="fixed-bottom">
	  	 <button type="button" class="layui-btn layui-btn-primary return-to-previous-page">返回上一页</button>
  		 <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addInfoBtn">立即添加</button>
	  </div>
	 
   </form>	
	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script type="text/javascript">	
		// 分类id
		var categoryIdsAry;
		// 分类名称
		var categoryNamesVal;
	
		$(document).ready(function() {
			
		})
		
		// 返回上一页  return-to-previous-page
		$(document).on('click', '.return-to-previous-page', function () {
			layer.confirm('确定返回上一级?你所做的修改将不被保存。', {
				btn: ['确定', '取消']		//按钮
			}, function (index) {
				layer.close(index);		
				window.location.href = '/product/showPageInfoList';
			});
		});
		
		layui.config({base:'/static/plugins/selectY/'});
	    layui.use('selectY', function(){
			var selectY = layui.selectY;
				selectY({
				elem:'#categorySelectY',
				// data:data,
				//url为ajax 获取json数据，当url属性有值时，不提取data属性值
				url:'/productCategory/selectList',
				placeholder:'请选择商品分类',
				disabledTips:'我也是有终点的',
				success:function(e){
					console.log(e.data);
					categoryNamesVal = e.data;
					
					console.log(e.ids);
					categoryIdsAry = e.ids;
				}
			});
		})
	    	
		layui.use('form', function () {
			var form = layui.form;
			//监听提交				
			form.on('submit(addInfoBtn)', function (data) {
				var dataQuery = data.field;	
				
				if(!categoryIdsAry){
					layer.msg("请选择商品分类");
					return false;
				}
					
				if(categoryIdsAry.length>0){
						for (let index = 0; index < categoryIdsAry.length; index++) {
							const element = categoryIdsAry[index];
							if(index==0){				
								dataQuery.mainCategoryId = element;
								break;	
							}	
						}
				}		
				dataQuery.categoryIds = JSON.stringify(categoryIdsAry);
				console.log(dataQuery);		
				$.ajax({
					url: '/product/addInfo',  		// 请求的url地址	
					dataType: 'json', 					// 返回格式为json	
					data: dataQuery,
					type: 'post', 						// 请求方式		
					async: false,	
					success: function (res) {
						if (res.code == 200) {	
							layer.msg("添加成功");
							window.location.href = '/product/showPageInfoList';
						} else {
							layer.msg(res.msg);
						}
					},
					error: function () {

					}
				}); 
				return false;
			});
		});
	</script>
</body>
</html>